<template>
  <div>
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <el-tabs v-model="activeName" @tab-click="handleChangeTab">
            <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="flex-box">
          <PatentSearch ref="patentSearch" v-if="activeName === '专利'" @getParams="getParams"/>
          <PaperSearch ref="paperSearch" v-if="activeName === '文献'" @getParams="getParams"/>
          <AchievementSearch ref="achievementSearch" v-if="activeName === '成果'" @getParams="getParams"/>
          <StandardSearch ref="standardSearch" v-if="activeName === '标准'" @getParams="getParams"/>
          
          <div class="btn-box">
            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
            <span class="reset-btn" @click="handleReset">全部重置</span>
          </div>
        </div>
      </el-card>
    </div>
    <p class="total">找到约<span>{{totalStr}}</span>条相关结果</p>
    <PatentResult ref="patentResult" v-if="activeName === '专利'" :listData="listData" :emptyText="emptyText"/>
    <PaperResult ref="paperResult" v-if="activeName === '文献'" :listData="listData" :emptyText="emptyText"/>
    <AchievementResult ref="achievementResult" v-if="activeName === '成果'" :listData="listData" :emptyText="emptyText"/>
    <StandardResult ref="standardResult" v-if="activeName === '标准'" :listData="listData" :emptyText="emptyText"/>
    
    <div class="pagination">
      <el-pagination
        background
        :total="total"
        :page-size="ips"
        layout="prev, pager, next"
        :current-page="ipi"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 检索
import PatentSearch from './search/Patent'
import PaperSearch from './search/Paper'
import AchievementSearch from './search/Achievement'
import StandardSearch from './search/Standard'
// 列表结果
import PatentResult from './result/Patent'
import PaperResult from './result/Paper'
import AchievementResult from './result/Achievement'
import StandardResult from './result/Standard'

import {thousands} from '@/utils/utils'
export default {
  components: {
    PatentSearch,
    PaperSearch,
    AchievementSearch,
    StandardSearch,
    PatentResult,
    PaperResult,
    AchievementResult,
    StandardResult
  },
  data() {
    return {
      info: {},
      activeName: '专利',
      tabs: [
        {label: '专利', name: '专利'},
        {label: '文献', name: '文献'},
        {label: '成果', name: '成果'},
        {label: '标准', name: '标准'},
      ],
      // 
      listData: [],
      ipi: 1,
      ips: 10,
      total: 0,
      totalStr: '',
      params: {},
      emptyText: 'loading'
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.getData()
    },
    // 获取专利列表
    getData() {
      this.listData = []
      this.emptyText = 'loading'
      let url = ''
      let params = {
        pid: this.info.key,
        ipi: this.ipi,
        ips: this.ips,
      }
      let keys = Object.keys(this.params)
      if (keys.length > 0) {
        keys.forEach(v => {
          if (this.params[v] === '全部') this.params[v] = ''
        })
        params = {
          ...params,
          ...this.params
        }
      }
      switch(this.activeName) {
        case '专利':
          url = this.$Url.team.expertPatentPageQuery
          break;
        case '文献':
          url = this.$Url.team.expertPaperPageQuery
          break;
        case '成果':
          url = this.$Url.team.expertChengguoPageQuery
          break;
        case '标准':
          url = this.$Url.team.expertBiaozhunPageQuery
          break;
      }
      this.$post(url, params).then((res) => {
        let data = res.data
        let agg = data && data.agg
        let result = data && data.result || []
        if (result.length <= 0) {
          this.emptyText = '暂无数据'
        }
        
        if (this.activeName === '专利') {
          this.$refs.patentSearch.init(agg)
          this.$refs.patentResult.init(result)
        }
        if (this.activeName === '文献') {
          this.$refs.paperSearch.init(agg)
          this.$refs.paperResult.init(result)
        } 
        if (this.activeName === '成果') {
          this.$refs.achievementSearch.init(agg)
          this.$refs.achievementResult.init(result)
        }
        if (this.activeName === '标准') {
          this.$refs.standardSearch.init(agg)
          this.$refs.standardResult.init(result)

        }

        
        this.total = data.total || 0;
        this.totalStr = thousands(this.total)
      }).catch((error) => {
        console.log(error);
      });
    },
    
    getParams(data) {
      this.params = JSON.parse(JSON.stringify(data))
    },
    // 全部重置 
    handleReset() {
      this.params = {}
      this.$nextTick(() => {
        if (this.activeName === '专利') this.$refs.patentSearch.reset()
        if (this.activeName === '文献') this.$refs.paperSearch.reset()
        if (this.activeName === '成果') this.$refs.achievementSearch.reset()
        if (this.activeName === '标准') this.$refs.standardSearch.reset()
        this.getData()
      })
    },
    handleSearch() {
      this.ipi = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.ipi = val
      this.getData()
    },
    handleChangeTab(tab, event) {
      this.ipi = 1
      this.handleReset()
      // this.getData()
    },
  },
  watch: {
    
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.el-tabs {
  ::v-deep {
    .el-tabs__header {
      box-sizing: border-box;
      margin-bottom: 0;
      .el-tabs__item {
        width: 80px;
        height: initial;
        line-height: initial;
        padding: 0 15px;
        text-align: center;
      }
      .el-tabs__active-bar {
        bottom: -18px;
      }
      .el-tabs__nav-wrap {
        overflow: initial;
        &:after {
          display: none;
        }
      }
      .el-tabs__nav-scroll {
        overflow: initial;
      }
    }
  }
}
.flex-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  ::v-deep {
    dl {
      position: relative;
      width: calc(100% - 200px);
      dd {
        position: relative;
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        &:last-of-type {
          margin-bottom: 0;
        }
        > div {
          margin-right: 40px;
          &:last-of-type {
            margin-right: 0;
          }
        }
        .tit {
          display: inline-block;
          width: 70px;
          line-height: 27px;
          margin-right: 10px;
          font-weight: normal;
          color: $color126;
        }
        .cont {
          position: relative;
          width: calc(100% - 70px);
          span {
            display: inline-block;
            padding: 4px 12px;
            margin-right: 15px;
            font-size: 14px;
            color: $color126;
            cursor: pointer;
            &.active {
              color: $color2;
              background-color: $mainColor;
            }
          }
        }
      }
    }
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    .search-btn {
      width: .96rem;
      height: .4rem;
      padding: 0;
      border-color: $mainColor;
      border-radius: 6px;
      box-sizing: border-box;
      margin-right: 20px;
      // font-family: SourceHanSansCN-Regular;
      font-size: .16rem;
      font-weight: bold;
      letter-spacing: 1px;
      color: $color17;
      vertical-align: middle;
      background-color: $mainColor;
      &:hover {
        background-color: rgba(3, 179, 140,0.1);
      }
    }
    .reset-btn {
      color: $color126;
      cursor: pointer;
      &:hover {
        
      }
    }
  }
}
.total {
  span {
    display: inline-block;
    margin: 0 4px;
    color: $color56;
  }
}
.pagination {
  text-align: center;
  padding-bottom: 20px;
}
</style>